Security News
Supply Chain Attack Detected in Solana's web3.js Library
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
By Sarah Gooding - Dec 03, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@material/fab
Advanced tools
What is @material/fab?
@material/fab is a Material Design implementation of the Floating Action Button (FAB) component. It provides a way to create floating action buttons that adhere to Material Design guidelines, offering a consistent and visually appealing user experience.
What are @material/fab's main functionalities?
Basic Floating Action Button
This code creates a basic floating action button with a 'favorite' icon. The button uses the 'mdc-fab' class to apply the Material Design styles.
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>Mini Floating Action Button
This code creates a mini floating action button with an 'edit' icon. The 'mdc-fab--mini' class makes the button smaller than the standard FAB.
<button class="mdc-fab mdc-fab--mini" aria-label="Edit">
<span class="mdc-fab__icon material-icons">edit</span>
</button>Extended Floating Action Button
This code creates an extended floating action button with an 'add' icon and a label. The 'mdc-fab--extended' class makes the button wider to accommodate the label.
<button class="mdc-fab mdc-fab--extended">
<span class="mdc-fab__icon material-icons">add</span>
<span class="mdc-fab__label">Add</span>
</button>Other packages similar to @material/fab
react-fab
react-fab is a React component library for creating floating action buttons. It provides similar functionality to @material/fab but is specifically designed for use with React. It offers customizable FABs with various styles and animations.
vue-fab
vue-fab is a Vue.js component library for creating floating action buttons. Like @material/fab, it adheres to Material Design guidelines but is tailored for Vue.js applications. It provides easy-to-use components for adding FABs to Vue projects.
angular-material
angular-material is a comprehensive library for Angular applications that includes a wide range of Material Design components, including floating action buttons. It offers more extensive functionality beyond just FABs, making it a versatile choice for Angular developers.
Floating Action Button
A floating action button represents the primary action in an application.
Design & API Documentation
Installation
npm install @material/fab
Basic Usage
Load Material Icons
We recommend using Material Icons from Google Fonts:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
However, you can also use SVG, Font Awesome, or any other icon library you wish.
HTML Structure
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
NOTE: The floating action button icon can be used with a
span,i,img, orsvgelement.
NOTE: IE 11 will not center the icon properly if there is a newline or space after the material icon text.
Styles
@use "@material/fab/mdc-fab";
JavaScript Instantiation
The FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating MDCRipple on the root element. See MDC Ripple for details.
import {MDCRipple} from '@material/ripple';
const fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));
See Importing the JS component for more information on how to import JavaScript.
Variants
Extended FAB
<button class="mdc-fab mdc-fab--extended">
<div class="mdc-fab__ripple"></div>
<span class="material-icons mdc-fab__icon">add</span>
<span class="mdc-fab__label">Create</span>
</button>
NOTE: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.
Style Customization
CSS Classes
| CSS Class | Description |
|---|---|
mdc-fab | Mandatory, for the button element |
mdc-fab__icon | Mandatory, for the icon element |
mdc-fab__ripple | Mandatory, for the element which shows the ripple. |
mdc-fab__label | Optional, for the text label. Applicable only for Extended FAB. |
mdc-fab--mini | Optional, modifies the FAB to a smaller size |
mdc-fab--extended | Optional, modifies the FAB to wider size which includes a text label. |
mdc-fab--exited | Optional, animates the FAB out of view. When this class is removed, the FAB will return to view. |
A note about
:disabled, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does not perform an action, you should also present an explanation to the user.
Sass Mixins
Basic Sass Mixins
MDC FAB uses MDC Theme's secondary color by default. Use the following mixins to customize it.
| Mixin | Description |
|---|---|
accessible($container-color) | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards. |
extended-fluid | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within @media queries. |
Advanced Sass Mixins
A note about advanced mixins, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.
| Mixin | Description |
|---|---|
container-color($color) | Sets the container color to the given color |
icon-size($width, $height) | Sets the icon width, height, and font-size properties to the specified width and height. $height is optional and will default to $width if omitted. The font-size will be set to the provided $width value. |
ink-color($color) | Sets the ink color to the given color |
extended-padding($icon-padding, $label-padding) | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, $label-padding will apply to both sides. |
extended-label-padding($label-padding) | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon. |
shape-radius($radius, $rtl-reflexive) | Sets rounded shape to only regular & mini FAB variants with given radius size. Set $rtl-reflexive to true to flip radius values in RTL context, defaults to false. |
extended-shape-radius($radius, $rtl-reflexive) | Sets rounded shape to only Extended FAB variant with given radius size. Set $rtl-reflexive to true to flip radius values in RTL context, defaults to false. |
The ripple effect for the FAB component is styled using MDC Ripple mixins.
Additional Information
Accessibility
Material Design spec advises that touch targets should be at least 48x48px. While the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:
<div class="mdc-touch-target-wrapper">
<button class="mdc-fab mdc-fab--mini mdc-fab--touch">
<div class="mdc-fab__ripple"></div>
<span class="material-icons mdc-fab__icon">add</span>
<span class="mdc-fab__label">Create</span>
<div class="mdc-fab__touch"></div>
</button>
</div>
Note that the outer mdc-touch-target-wrapper element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).
Positioning
Developers must position MDC FAB as needed within their application's design.
<!--
This will position the FAB in the bottom-right corner.
Modify to fit your design's requirements.
-->
<style>
.app-fab--absolute {
position: fixed;
bottom: 1rem;
right: 1rem;
}
@media(min-width: 1024px) {
.app-fab--absolute {
bottom: 1.5rem;
right: 1.5rem;
}
}
</style>
<button class="mdc-fab app-fab--absolute" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
FAQs
The Material Components for the web floating action button component
We found that @material/fab demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Package last updated on 25 Feb 2020
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
By Socket Research Team - Dec 02, 2024
Security News
Research
Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
By Kirill Boychenko - Nov 27, 2024